<template>
  <div class="table-list">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.name">
        <el-button
          type="add"
          size="14"
          class="add-version-btn"
          @click="handleAddOrEdit({}, 'add')">新增{{ activeName }}版本</el-button>
        <transition name="fade">
          <el-table
            v-show="activeName === tab.name"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            size="medium"
            :header-cell-style="{ background: '#F5F6F7' }">
            <el-table-column label="版本号">
              <template slot-scope="scope">
                {{ scope.row.versionCode || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                {{ status(scope.row.status) || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="提示频率">
              <template slot-scope="scope">
                {{ frequency(scope.row.frequency) || "-" }}
              </template>
            </el-table-column>
            <el-table-column label="更新说明">
              <template slot-scope="scope">
                {{ scope.row.description || "-" }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180px">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === 0 || scope.row.status === 1" type="text" size="operate" @click="handleAddOrEdit(scope.row, 'edit')">编辑</el-button>
                <el-button v-if="scope.row.status === 0" type="text" size="operate" @click="handleTest(scope.row)">测试</el-button>
                <el-button v-if="scope.row.status === 1" type="text" size="operate" @click="handleGoLive(scope.row)">上线</el-button>
                <el-button v-if="scope.row.status === 2" type="text" size="operate" @click="handleOffline(scope.row)">下线</el-button>
                <el-button v-if="scope.row.status === 0 || scope.row.status === 1" type="text" size="operate" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-tab-pane>
    </el-tabs>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import { versionList, testVersion, onlineVersion, offlineVersion, deleteVersion } from '@/api/app/myapp'
export default {
  name: 'tableList',
  props: {
    applyData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      loading: false,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      activeName: 'uni-app',
      tabs: [
        { id: 1, label: 'uni-app', name: 'uni-app' },
        { id: 2, label: 'Android', name: 'Android' },
        { id: 3, label: 'IOS', name: 'IOS' }
      ],
      tableData: []
    }
  },
  computed: {
    versionType() {
      const tabText = {
        'uni-app': '0',
        'Android': '1',
        'IOS': '2'
      }
      return tabText[this.activeName] || ''
    }
  },
  watch: {
    // app应用有值得时候
    applyData(newVal, oldVal) {
      newVal.appInfoId && this.queryVersionList()
    }
  },
  created() {

  },
  methods: {
    // 列表status状态描述
    status(row) {
      const statusText = {
        '0': '未上线',
        '1': '测试中',
        '2': '已上线'
      }
      return statusText[row]
    },
    // 列表提示频率描述
    frequency(row) {
      const statusText = {
        '0': '每天',
        '1': '每次',
        '2': '每三天'
      }
      return statusText[row]
    },
    /**
     * 版本列表
     * @param appInfoId app_info表id
     * @param type 版本类型（0：uniapp，1：android，2：ios）
     */
    queryVersionList() {
      this.loading = true
      const params = {
        appInfoId: this.applyData.appInfoId,
        type: this.versionType,
        size: this.pageSize,
        current: this.currentPage
      }
      versionList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换表格tab
    handleClick(tab) {
      this.activeName = tab.name
      this.queryVersionList()
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryVersionList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryVersionList()
    },
    // 新增/编辑版本
    handleAddOrEdit(row, key) {
      this.$emit('custom-event', row, key, this.activeName)
    },
    // 测试
    handleTest(row) {
      this.$confirm('确定后，白名单用户可收到升级提示。 （请确保测试账号属于白名单）', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          appVersionInfoId: row.appVersionInfoId
        }
        testVersion(params).then(res => {
          this.$message({
            type: 'success',
            message: '测试成功!'
          })
          this.queryVersionList()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {})
    },
    // 上线
    handleGoLive(row) {
      this.$confirm('版本上线后，所有用户会收到升级提示，请充分测试验证。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          appVersionInfoId: row.appVersionInfoId
        }
        onlineVersion(params).then(res => {
          this.$message({
            type: 'success',
            message: '上线成功!'
          })
          this.queryVersionList()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {})
    },
    // 下线
    handleOffline(row) {
      this.$confirm('版本下线会导致该版本不可用，请谨慎操作！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          appVersionInfoId: row.appVersionInfoId
        }
        offlineVersion(params).then(res => {
          this.$message({
            type: 'success',
            message: '下线成功!'
          })
          this.queryVersionList()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {})
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          appVersionInfoId: row.appVersionInfoId
        }
        deleteVersion(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.queryVersionList()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(err => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.table-list {
  .add-version-btn {
    float: right;
    margin-top: 9px;
    margin-bottom: 16px;
  }
}
::v-deep .el-tabs__item {
  padding: 0 50px !important;
}

::v-deep .fade-enter-active,

::v-deep .fade-leave-active {
  transition: opacity 0.5s;
}

::v-deep .fade-enter,

::v-deep.fade-leave-to {
  opacity: 0;
}
</style>
